<template>
  <div class="frequency">
    <!-- 搜索 -->
    <div class="nav">
      <div class="nav_box">
        <router-link to="/home/index" class="router-link-active"
          >首页</router-link
        >
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/frequency" class="router-link-active"
          >视频集锦</router-link
        >
      </div>
    </div>
    <el-container>
      <el-aside>
        <div class="title" style="cursor: pointer" @click="zkclick">
          <el-icon color="#e02020" class="ico_1">
            <Menu />
          </el-icon>
          <div class="tet">视频集锦</div>
          <el-icon color="#e02020" class="ico_2" v-if="zk">
            <ArrowUp />
          </el-icon>
          <el-icon color="#e02020" class="ico_2" v-else>
            <ArrowDown />
          </el-icon>
        </div>
        <div
          v-if="zk"
          :class="myitem == i ? 't_item' : 't_item1'"
          v-for="(item, i) in list"
          :key="i"
          style="cursor: pointer"
          @click="citem(i, item.id)"
        >
          <div class="tet">
            {{ item.name }}
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="fre" v-if="total > 0">
          <div class="fre_con">
            <div
              class="f_item"
              v-for="item in video"
              :key="item.id"
              style="cursor: pointer"
              @click="maskopen(item.url, item.id, item.seconds)"
            >
              <img :src="item.cover" alt="" class="vid" />
              <div class="title">{{ item.title }}</div>
              <div class="br"></div>
            </div>
          </div>
          <div class="con_bom">
            <div class="cc">共{{ total }}条</div>
            <el-pagination
              v-model:page-size="pageSize"
              background
              layout="prev, pager, next"
              :total="total"
              @next-click="nextclick"
              @prev-click="prevclick"
              @change="change1"
            />
          </div>
        </div>
        <div class="rq" v-else>
          <img src="@/image/容器.svg" alt="" />
          <div>暂无信息</div>
        </div>
      </el-main>
    </el-container>
    <div class="mask" v-if="msk">
      <div class="mmm">
        <div class="cuo" style="cursor: pointer" @click="cuo">x</div>
        <video :src="vido" controls autoplay loop class="vido">
          您的浏览器不支持视频标签。
        </video>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  getvideocateApi,
  getvideoApi,
  getviewsApi,
  getpointApi
} from '@/api/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
let Router = useRouter()
// function particulars() {
//   Router.push('/home/particulars')
// }
const list = ref([{ id: 1, name: '' }])
getvideocateApi().then(res => {
  // console.log('分类', res)
  list.value = res.data.data
  list.value.push({ id: 0, name: '理论之星' })
})
// let cid = ref(1)
const names: any = ref({ cid: 1, page: 1, page_size: 6 })

let video = ref()
const total = ref(0)
const getvideo = () => {
  getvideoApi(names.value).then(res => {
    video.value = res.data.data.data
    total.value = res.data.data.total
    console.log('视频', res)
  })
}
getvideo()
let myitem = ref(0)
const citem = (ev: number, id: any) => {
  if (id == 0) {
    Router.push('/theory')
  } else {
    names.value.cid = id
    myitem.value = ev
    names.value.cid = list.value[ev].id
    getvideo()
  }

  // console.log(ev, myitem.value)
}
// 遮罩层
const msk = ref(false)
const vido = ref()
const second = ref()
const timeoutId: any = ref()
const point: any = ref({
  source: 4,
  source_id: 1
})
const maskopen = (url: any, id: any, seconds: any) => {
  msk.value = true
  second.value = seconds
  timeoutId.value = setTimeout(() => {
    point.value.source_id = id
    getpointApi(point.value).then(res => {
      console.log('积分', res)
      if (res.data.code == 1) {
        ElMessage({
          message: '获得' + res.data.data.point + '积分',
          type: 'success'
        })
      }
    })
  }, second.value * 1000)
  vido.value = url
  getviewsApi({ id: id }).then(res => {
    console.log(res)
  })
  // console.log(url)
}
const zk = ref(true)
const zkclick = () => {
  zk.value = !zk.value
}
const cuo = () => {
  msk.value = false
  clearTimeout(timeoutId.value)
}
// 分页

const pageSize = ref(6)
const nextclick = () => {
  names.value.page++
  getvideo()
}
const prevclick = () => {
  names.value.page--
  getvideo()
}
const change1 = (e: any) => {
  console.log(e)
  names.value.page = e
  getvideo()
}
</script>

<style lang="scss" scoped>
.rq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;

  img {
    width: 228px;
    height: 226px;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;

  .mmm {
    position: relative;
    width: 968px;
    height: 544px;
    margin: 0 auto;
    margin-top: 30px;

    .vido {
      width: 968px;
      height: 544px;
    }

    .cuo {
      cursor: pointer;
      position: absolute;
      right: 10px;
      font-size: 30px;
      color: #fff;
      z-index: 9999;
    }
  }
}

.el-container {
  .el-main {
    position: relative;
    width: 816px;
    height: 1200px;
    background-color: #fff;
    overflow: hidden;

    .fre {
      margin-top: -18px;
      margin-left: -16px;
      width: 800px;
      background-color: #fff;

      .fre_con {
        display: flex;
        flex-wrap: wrap;
        padding: 16px;

        .f_item {
          .vid {
            width: 374px;
            height: 210px;
            background-color: blue;
            border-radius: 8px;
          }

          .title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 9px 0 17px 0;
          }

          .br {
            width: 374px;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 32px;
          }
        }

        :nth-child(2n-1) {
          margin-right: 6px;
        }
      }

      .con_bom {
        position: absolute;
        bottom: 100px;
        left: 50%;
        display: flex;
        transform: translateX(-50%);

        .cc {
          margin-top: 8px;
        }
      }

      .aa {
        height: 50px;
      }
    }
  }

  .el-aside {
    width: 232px;
    background-color: #fff;
    margin: 0 16px;

    .t_item {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: #e02020;
      font-size: 14px;
      border-radius: 2px;
      background: rgba(224, 32, 32, 0.1);

      .tet {
        margin-left: 44px;
      }
    }

    .t_item1 {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;

      .tet {
        margin-left: 44px;
      }
    }

    .title {
      display: flex;
      width: 216px;
      height: 36px;
      line-height: 36px;
      margin: 16px 8px 0;

      .ico_1 {
        margin: 10px 8px 0 20px;
        font-size: 15px;
      }

      .ico_2 {
        font-size: 15px;
        margin: 10px 8px 0 80px;
      }

      .tet {
        font-size: 14px;
        color: #e02020;
      }
    }
  }
}

.nav {
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;

  .nav_box {
    margin-left: 44px;
    font-size: 16px;
    color: #999999;

    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }

    .el-icon {
      margin: 15px 10px 0 10px;
    }
  }
}

@media (max-width: 1024px) {
  .frequency {
    width: 100%;
    margin: 0 auto;
    background-color: #f0f0f0;
  }
}

@media (min-width: 1025px) {
  .frequency {
    width: 1080px;
    margin: 0 auto;
    background-color: #f0f0f0;
  }
}
</style>
